
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

//  全局变量
let wscObj = document.querySelector('.wsc')
let score = 0
let wscX = 0
let wscY = (window.innerHeight || document.documentElement.clientHeight) - wscObj.offsetHeight


//随机x轴
// 1 打开页面，执行定时器代码 1s
// 2 定时器处理函数中 
//   2.1 随机数0-9  
//   2.2 判断2.1随机数68创建冠军食物，01234579热狗食物
//   2.3 追加食物到页面
// setInterval(function(){})
function startFoodPlay() {
  return setInterval(() => {
    //创建掉落img标签
    let imgObj = document.createElement('img')
    //实物掉落概率
    let who = random(0, 9)  //让4,6,8是炸弹，剩余是食物
    if ([4, 6, 8].includes(who)) {

      imgObj.className = 'food zhadan'
      imgObj.src = './img/zhadan.jpg'
      imgObj.setAttribute('type', 'zhadan')
    } else {
      imgObj.className = 'food hotdog'
      imgObj.src = './img/hotdog.jpg'
      imgObj.setAttribute('type', 'hotdog')
    }
    //追加食物到页面
    //先设置它的最大值与最小值
    let min = 0
    let max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth
    imgObj.style.left = random(min, max) + 'px'
    imgObj.style.top = '0px'
    document.body.appendChild(imgObj)

  }, 1000)
}

//  食物掉落 y轴
// 1 打开页面，执行定时器代码 50ms
// 2 定时器处理函数中 
//   2.1 获取所有食物
//   2.2 遍历
//   2.3 计算top数据：原top+ 2
//   2.4 判断位置  超出-网页移除，没超出-重置top
function startTimeY() {
  return setInterval(function () {
    console.log('lll');
    //获取食物
    let foods = document.querySelectorAll('.food')
    // console.log(foods);

    //遍历
    foods.forEach((item, index) => {
      //计算top数据：原数据+2
      let top = parseInt(item.style.top) + 2
      let maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight
      if (top >= maxTop) {
        document.body.removeChild(item)
      } else {
        item.style.top = top + 'px'
      }

      //3. 食物掉落判斷是否在王公子范围内
      // 公式x：食物x > 王公子x && 食物x < 王公子x+自身宽度
      // 公式y：食物y+自身高度 >王公子y
      // 符合 {公式x、公式y}则分数+1
      let foodX = parseInt(item.style.left)
      let foodY = parseInt(item.style.top) + item.offsetHeight
      if (
        (foodX > wscX && foodX <= (wscX + wscObj.offsetWidth)) && foodY > wscY
      ) {
        let type = item.getAttribute('type')
        // score++
        type == 'zhadan' ? score -= 5 : score++
        console.log(`食物坐标[${foodX},${foodY}],王公子坐标[${wscX + wscObj.offsetWidth},${wscY + wscObj.offsetHeight}],+1,总分[${score}]`);
        document.querySelector('.game-score h1:nth-of-type(2)').innerText = score >= 0 ? `+${score}分` : `${score}分`
        document.body.removeChild(item)

        // 提示 <div class="show-score">+1</div>
        let divObj = document.createElement('div')
        divObj.className = 'show-score'
        divObj.innerText = type == 'zhadan' ? '-5' : '+1'
        divObj.style.left = wscX + wscObj.offsetWidth + 'px'
        document.body.appendChild(divObj)
        setTimeout(() => document.body.removeChild(divObj), 1000)

      }

    })
  })
}

//  安排王公子
// 1 打开网页，绑定鼠标移动事件
// 2 事件处理函数中
//   2.1 获取事件对象
//   2.2 限定left最大0 最大网页宽度-王公子宽度
//   2.3 同步left为鼠标位置
document.onmousemove = function (evt) {
  //获取事件对象
  let e = evt || window.event
  //限定left最小为0 ，最大为网页宽度减去wsc宽度
  let wscObj = document.querySelector('.wsc')
  let left = e.clientX - wscObj.offsetWidth / 2
  let maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
  if (left < 0) left = 0
  if (left >= maxLeft) left = maxLeft
  //同步鼠标位置
  wscObj.style.left = left + 'px'
  // 重置王公子坐标
  wscX = left
}





//  结束游戏
// 1 打开页面，执行定时器代码 1s
// 2 定时器处理函数中 
//   2.1 time--
//   2.2 判断
//   time>=0 同步到页面
//   else   1-清除游戏倒计时、2-清除随机食物、3-重置游戏60s、4-展示重新开始面板
let time = 10
function startTimePlay() {

  return setInterval(() => {
    time--
    let gameScoreObj = document.querySelector('.game-score span')
    if (time >= 0) {
      gameScoreObj.innerText = time
    } else {
      clearInterval(gameT)
      clearInterval(foodT)
      clearInterval(foodY)
      time = 10

      //展示重新开始面板

      let payPanel = document.querySelector('.play-panel')
      let payPanelStop = document.querySelector('.stop')
      payPanel.querySelector('.score').innerText = score + '分'
      payPanel.style.display = payPanelStop.style.display = 'block'
    }
  }, 1000)
}


//重新开始游戏
let startBtn = document.querySelector('.play-panel .stop .btn')
startBtn.onclick = function () {
  //清空分数
  score = 0
  document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
  //开始游戏
  foodT = startFoodPlay()
  gameT = startTimePlay()
  foodY = startTimeY()
  //开始 面板
  let payPanel = document.querySelector('.play-panel')
  let payPanelStop = document.querySelector('.stop')
  payPanel.style.display = payPanelStop.style.display = 'none'
}
let foodT
let foodY
let gameT
function startGame()
{
  foodT=startFoodPlay();
  foodY=startTimeY();
  gameT=startTimePlay();
}